<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用例ID:{{!case_detail.case_id!}}详情</title>
    <link rel="stylesheet" href="static/element.css">
    <script src="static/vue.js"></script>
    <script src="static/element.js"></script>
    <script src="static/echarts.js"></script>
    <script src="static/jquery.js"></script>
    <link rel="shortcut icon" href="static/favicon.ico">
</head>
<body>
<div id="app">
    <div style="padding-top: 5px">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>
                   <b>模糊规则</b>
                   <i v-if="case_detail.assert_result==='True'"
                       class="el-icon-s-flag"
                       style="font-size: 24px;
                       color: #13ce66">
                   </i>
                    <i v-else class="el-icon-s-flag" style="font-size: 24px; color: #ce1313"></i>
                </span>
            </div>
            <div class="text item">
                {{case_detail.fuzz_desc}}
            </div>
        </el-card>
    </div>
    <div class="card-pad">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>
                    <b>断言结果</b>
                    <i v-if="case_detail.assert_result==='True'"
                       class="el-icon-circle-check" style="font-size: 24px;color: #13ce66"
                    ></i>
                    <i v-else class="el-icon-circle-close" style="font-size: 24px; color: #ce1313"></i>
                </span>
            </div>
            <div class="text item">
                {{case_detail.assert_detail}}
            </div>
        </el-card>
    </div>
    <div class="card-pad">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span><b>请求地址</b></span>
            </div>
            <div class="text item">
                {{case_detail.req_url}}
            </div>
        </el-card>
    </div>
    <div class="card-pad">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span><b>请求头</b></span>
            </div>
            <div class="text item">
                <pre id="req-headers"></pre>
            </div>
        </el-card>
    </div>
    <div class="card-pad">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span><b>请求参数</b></span>
            </div>
            <div class="text item">
                <pre id="param"></pre>
            </div>
        </el-card>
    </div>
    <div class="card-pad">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span><b>HTTPCODE</b></span>
            </div>
            <div class="text item">
                {{case_detail.code}}
            </div>
        </el-card>
    </div>
    <div class="card-pad">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span><b>响应头</b></span>
            </div>
            <div class="text item">
                <pre id="res-headers"></pre>
            </div>
        </el-card>
    </div>
    <div class="card-pad">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span><b>响应结果</b></span>
            </div>
            <div class="text item">
                <pre id="req-response"></pre>
            </div>
        </el-card>
    </div>

</div>
</body>
<script>
        new Vue(
        {
            el: '#app',
            data: function () {
                return {
                    case_detail: {{!case_detail!}}
            }
            },
            methods: {

            }
        },
    )
            // 方法实现
    function syntaxHighlight(json) {
        if (typeof json != 'string') {
            json = JSON.stringify(json, undefined, 2); //返回要JSON化的对象，2是spacing
        }
        json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
        return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g,
            function (match) {
                var cls = 'number';
                if (/^"/.test(match)) {
                    if (/:$/.test(match)) {
                        cls = 'key';
                    } else {
                        cls = 'string';
                    }
                } else if (/true|false/.test(match)) {
                    cls = 'boolean';
                } else if (/null/.test(match)) {
                    cls = 'null';
                }
                return '<span style="color: green;width:60%;word-wrap:break-word;white-space:normal;">' + match + '</span>';
            }
        );
    }

    $('#param').html(syntaxHighlight({{!case_detail.param!}}));
    $('#req-response').html(syntaxHighlight({{!case_detail.req_response!}}))
    $('#req-headers').html(syntaxHighlight({{!case_detail.headers!}}))
    $('#res-headers').html(syntaxHighlight({{!case_detail.res_headers!}}))
</script>
<style>
  .text {
    font-size: 18px;
  }

  .item {
    margin-bottom: auto;
  }

  .card-pad {
      padding-top: 10px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: auto;
  }
  b {
      font-size: 25px;
  }

  pre {
      font-family: "Microsoft Tai Le";
      font-size: 18px;
  }
</style>
</html>